<template>
  <div class="app-container" style="background-color: rgb(255,255,255)">
    <div class="header_top">
      <div class="topcont">
        <img src="../../../assets/img/resources/header.jpg" style="width: 69%;overflow-clip-margin: content-box;overflow: clip;">
        <form >
          <div class="searchbg">
            <input type="text" v-model="queryParams.name" placeholder="请输入关键字">
            <button type="submit" @click="handleQuery" class="btn_search" title="搜索">
              搜索
            </button>
          </div>
        </form>
      </div>
    </div>
    <div class="ul_list01">
      <el-row>
        <el-col :span="8" v-for="(points, index) in pointsList" :key="index" >
          <el-card :body-style="{ padding: '0px' }" style="width: 400px;height: 320px;margin-top: 50px">
            <img style="width: 400px;height: 200px"  src="" v-if="points.coverFiles.length < 1"  alt="">
            <img style="width: 400px;height: 200px" :src="points.coverFiles[0].url" v-else  alt="">
            <div style="padding: 14px;">
              <span>{{ points.name }}</span>
              <div class="bottom clearfix">
                <div class="describes" >
                <span class="data">
                  <el-popover
                    placement="top-start"
                    trigger="hover"
                    width="400"
                    :disabled="points.describes.length < 26"
                    effect="dark"
                    :content="points.describes"
                  >
                  <span slot="reference">
                    {{ points.describes.length > 26 ? points.describes.substring(0, 26) + "..." : points.describes }}
                  </span>
                  </el-popover>
                </span>
                </div>
                <div class="time">
                  <time >所需积分：{{ points.points }}</time>
                </div>

                <div v-if="!userShopList.includes(points.id)" class="button">
                  <el-button type="text" style="color: rgb(64,158,255)" @click="exchange(points.id)">立即兑换</el-button>
                </div>
                <div v-else class="button">
                  <el-tag type="success">已兑换</el-tag>
                </div>

              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div class="page">
        <pagination
          v-show="total>0"
          :total="total"
          :page-sizes="[6, 12, 24,48]"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {listPointsShop,addUserShop,listUserShop} from "@/api/common.js";

export default {
  name: "antiFraud",
  data() {
    return {
      // 表单参数
      form: {},
      // 显示搜索条件
      showSearch: true,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 6,
        name: '',
      },
      pointsList:[],
      userShopList:[]
    };
  },
  created() {
    this.getList()
  },
  methods: {
    /** 修改按钮操作 */
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      listPointsShop(this.addDateRange(this.queryParams)).then(response => {
        this.pointsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
      listUserShop().then(res=>{
        this.userShopList = res.data.map((item,index) => {
          return item.shopId;
        })
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    exchange(id){
      addUserShop({shopId:id}).then(res=>{
        this.$message({
          message: '兑换成功',
          type: 'success'
        });
        this.getList();
      })
    }
  }
};
</script>
<style>
.header_top {
  width: 1381px;
  padding: 0 0 0;
  background: url(../../../assets/img/resources/bgline.jpg) repeat-x;
  overflow: hidden;
}
.header_top .topcont {
  position: relative;
  text-align: center;
}
@media screen and (min-width: 980px)
.header_top .topcont {
  width: 980px;
  margin: 0px auto;
}
form {
  display: block;
  margin-top: 0em;
}
.header_top .searchbg {
  position: absolute;
  bottom: 50%;
  margin-top: -12px;
  margin-bottom: -12px;
  right: 167px;
  padding: 1px;
  background: url(../../../assets/img/resources/searchbg.jpg) no-repeat;
}
.header_top .searchbg input {
  float: left;
  width: 194px;
  height: 24px;
  line-height: 24px;
  padding: 0px 2px;
  border: none;
  outline: none;
}
input, button, textarea, select, optgroup, option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
}
.header_top .searchbg .btn_search {
  float: right;
  display: block;
  width: 50px;
  height: 24px;
}
.ul_list01 {
  margin: -20px 0 0 30px;
  padding: 0 20px;
  border-bottom: #ccc 1px dotted;
  overflow: hidden;
}
.page {
  padding: 10px;
  text-align: right;
  font-size: 12px;
  overflow: hidden;
}
.data{
  margin-top: 6px;
  font-size: 13px;
  display: inline-block;
  color: #999;
}
.time {
  width: 30%;
  margin-top: 20px;
  font-size: 13px;
  display: inline-block;
  color: #999;
}
.button {
  display: inline-block;
  margin-top: 10px;
  margin-left: 10px;
  padding: 0;
  float: right;
}
</style>
